<!DOCTYPE html>

<html xmlns:th="http://www.thymeleaf.org">
<meta charset="UTF-8" />
<head>
<title>Home</title>
<script src="/webjars/sockjs-client/sockjs.min.js"></script>
<script src="/webjars/stomp-websocket/stomp.min.js"></script>
<script src="/webjars/jquery/jquery.min.js"></script>
</head>
<body>
	<p>聊天室</p>

	<form id="wiselyForm">
		<textarea rows="4" cols="60" name="text"></textarea>
		<input type="submit" />
	</form>

	<script th:inline="javascript">
		$('#wiselyForm').submit(function(e) {
			e.preventDefault();
			var context = $('#wiselyForm').find('textarea[name="text"]');
			var text = context.val();
			context.val('');
			sendSpittle(text);
			$('#output').append("<font size='3' color='green'>Send: " + text + "</font><br/>")
		});

		var sock = new SockJS("/addpointChat"); //1
		var stomp = Stomp.over(sock);
		stomp.connect('guest', 'guest', function(frame) {
			stomp.subscribe("/user/queue/notifications", handleNotification);//2
		});

		function handleNotification(message) {
			$('#output').append("<font size='3' color='red'>Received: " + message.body + "</font><br/>")
		}

		function sendSpittle(text) {
			stomp.send("/chat", {}, text);//3
		}
		$('#stop').click(function() {
			sock.close()
		});
	</script>

	<div id="output"></div>
</body>
</html>